<template>
    <el-drawer
        size="30%"
        v-model="drawer"
        :title="'添加设施'"
        direction="rtl"
        :before-close="closeDrawer">
    <el-form
          size="small"
          ref="formRef"
          style="max-width: 600px"
          :model="formData"
          status-icon
          :rules="rules"
          label-width="60px"
      >
      <el-form-item label="设施名称" prop="name" >
          <el-input v-model="formData.facilityInfo" style="width: 300px;" />
      </el-form-item>
      
      <el-form-item label="设施" prop="sex">
          <el-radio-group v-model="formData.facilityType" style="width: 300px;">
          <el-radio label="房型">房型设施</el-radio>
          <el-radio label="酒店">酒店设施</el-radio>
      </el-radio-group>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)">添加</el-button>
          <el-button @click="resetForm(formRef)">取消</el-button>
      </el-form-item>
    
    </el-form>
    </el-drawer>
</template>

<script setup lang="ts">
import { FormInstance ,FormRules,ElNotification} from "element-plus";
import { ref,reactive ,onMounted} from "vue";
import { $save } from "../../api/facilities.ts";
const drawer = ref(false)

const emit = defineEmits(['sync-list'])

//关闭抽屉
const closeDrawer = () =>{
    drawer.value =false
    //重置表单
    formRef.value?.resetFields()
    //清空表单
    formData.value = {
      facilityInfo:'',
      facilityType:'',     
    }
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
   //清空表单
    formData.value = {
      facilityInfo:'',
      facilityType:'',     
    }
}

//提交表单
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return

  formEl.validate(async (valid) => {
    
    if (valid) {
      let ret = await $save(formData.value)
        if (ret.code === 2001) {
          ElNotification({
            title: '成功！',
            message: '设施新增成功！',
            type: 'success',
          })
          //通知父组件更新列表
          emit('sync-list')
          //重置表单
          formRef.value?.resetFields()
        }else{
          ElNotification({
            title: '失败',
            message: '请联系管理员',
            type: 'error',
          })
        }
      
    }else {
      console.log('error submit!')
    }
  })
}

const formRef = ref<FormInstance>
const formData = ref({
    facilityInfo:'',
    facilityType:'',
})

const validateFacilityInfo = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入设施名称'))
  } else {
    callback()
  }
}

const validateFacilityTyp = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请选择设施类型'))
  } else {
    callback()  // 验证通过
  }
}

const rules = reactive<FormRules<typeof formData>>({
  facilityType: [{ validator: validateFacilityTyp, trigger: 'blur' }],
  facilityInfo: [{ validator: validateFacilityInfo, trigger: 'blur' }],
})




//暴露成员
defineExpose({
    drawer,
})
</script>

<style lang="scss" scoped>

</style>